{% extends 'globalPage.html' %}
<title>{% block title %}个人中心{% endblock %}</title>
{% block body %}
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" style="padding: 0;" href="{% url 'home' %}"><img style="height: 50px;"
                                                                                         src="/static/image/logo.png"
                                                                                         alt="Band"></a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="{% url 'home' %}">首页</a></li>
                    <li><a href="{% url 'courses' 'firstGrade' 'allCourses' 1 %}">课程</a></li>
                </ul>
                <form class="navbar-form navbar-left" action="{% url 'search' %}" method="get">
                    <div class="form-group">
                        <input type="text" class="form-control" value="{{ searchContent }}" name="searchContent"
                               placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">🔍</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    {% if user.is_authenticated %}
                        <li><a href="javascript:;" style="margin-top: 5px">你好，{{ user.first_name }}</a></li>
                        <li class="dropdown">
                            <a id="dLabel" data-target="#" href="javascript:;" data-toggle="dropdown"
                               role="button" aria-haspopup="true" aria-expanded="false">
                                <img class="img-circle" src="/static/image/head.jpg" alt="head"
                                     style="height: 30px;">
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="dLabel">
                                <li><a href="{% url 'personalCenter' %}" style="text-align: center">个人中心</a></li>
                                <li><a href="{% url 'history' %}" style="text-align: center">播放历史</a></li>
                                <li><a href="{% url 'logout' %}" style="text-align: center">退出登陆</a></li>
                            </ul>
                        </li>
                    {% else %}
                        <li><a href="{% url 'login' %}">登陆/注册</a></li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>
    <div class="container">
        <div class="panel-body"
             style="width: 538px; height: 654px; margin: 50px auto; background: white; border-radius: 2%">
            <div style="width: 200px; height: 200px; margin: 20px auto 0;">
                <img class="img-circle" style="height: 200px;" src="/static/image/Head.jpg" alt="Band">
            </div>
            <form action="" method="post">
                {% csrf_token %}
                <div class="input-group input-group-lg"
                     style="position: relative;display: flex;align-items: center;justify-content: center; margin: 25px 100px">
                    <input type="text" style="border-radius: 5px;" class="form-control" placeholder="昵称"
                           name="first_name" aria-describedby="sizing-addon1" value="{{ user.first_name }}">
                </div>
                <div class="input-group input-group-lg"
                     style="position: relative;display: flex;align-items: center;justify-content: center; border-radius: 2%; margin: 25px 100px">
                    <input type="password" style="border-radius: 5px;" class="form-control" placeholder="新密码"
                           name="password" aria-describedby="sizing-addon1">
                </div>
                <div class="input-group input-group-lg"
                     style="position: relative;display: flex;align-items: center;justify-content: center; border-radius: 2px; margin: 25px 100px">
                    <input type="submit" style="border-radius: 5px;" class="form-control btn btn-info"
                           aria-describedby="sizing-addon1" value="保存修改">
                </div>
            </form>
            {% if result %}
                <div class="alert alert-danger alert-dismissible" role="alert"
                     style="width: 251px; height: 47px; margin: 20px auto;">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <strong>密码修改失败</strong> 请填写新密码！
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}